<template>
  <el-container>
    <el-aside width="200px">
      <h2 style="line-height: 60px;padding: 0 20px; margin: 0;">
        <router-link to="/cq">
          <button>打开笔试题三</button>
        </router-link>
      </h2>
      <el-col>
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>
    <el-container>
      <el-header>
        <el-row>
          <el-button @click="sendRequest">发起请求</el-button>
          <el-button type="primary" @click="getLocalstorage">获取缓存</el-button>
          <el-button type="success" @click="goNewPage">跳转页面</el-button>
          <el-button type="info" @click="triggerBtn">消失/隐藏{{ count }}</el-button>
          <el-button
            type="warning"
            v-show="count !== 1"
            @click="getSum"
          >{{ count === 3 ? '求和' : '按钮5' }}</el-button>
          <el-button
            type="danger"
            v-show="count !== 1"
            @click="openForm"
          >{{ count === 3 ? '弹出表单' : '按钮6' }}</el-button>
        </el-row>
      </el-header>
      <el-main>
        <h2 v-if="showSum > 0">总和：{{ showSum }}</h2>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="0" label="姓名" width="180"></el-table-column>
          <el-table-column prop="1" label="价格">
            <template slot-scope="scope">{{ scope.row[1] | dataFormat }}</template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-dialog title="提示" :visible.sync="showDialog" width="30%">
        <div>姓名：{{ myInfo.name }}</div>
        <div>性别：{{ myInfo.sex }}</div>
        <div>年龄：{{ myInfo.age }}</div>
        <div>生日：{{ myInfo.birth }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
        </span>
      </el-dialog>
      <Add :dialogVisible="dialogVisible" @checkDialog="checkDialog" :myInfo="myInfo" />
    </el-container>
  </el-container>
</template>

<script>
import Axios from "axios";
import { getInfoFromIdcard } from '@/utils/tools';
import Add from '../components/Add.vue'
export default {
  name: 'Home',
  components: {
    Add
  },
  data() {
    return {
      tableData: [{
        1: '232233.3333',
        0: '王小虎'
      }],
      showDialog: false,
      myInfo: {},
      count: 0,
      showSum: 0,
      dialogVisible: false
    }
  },
  created: function () {
    localStorage.setItem('name', '曹强');
    localStorage.setItem('idcard', '640221199610104212');

  },
  // computed: {
  //   showSum: function () {
  //     let sum = 0;
  //     for (let i in this.tableData) {
  //       sum = + this.tableData[i][1]
  //     }
  //     return sum.toFixed(2);
  //   }
  // },
  methods: {
    sendRequest: function () {
      Axios.get('/sug?code=utf-8&q=%E7%94%B5').then((res) => {
        console.log(res);
        this.tableData = res.data.result;
      })
    },
    getLocalstorage: function () {
      const name = localStorage.getItem('name');
      const idcard = localStorage.getItem('idcard');
      console.log(name, idcard)
      const info = getInfoFromIdcard(idcard) || {};
      console.log(info);
      this.myInfo = {
        name,
        idcard,
        ...info
      }
      this.showDialog = true;
    },
    goNewPage: function () {
      this.$router.push({
        path: '/about'
      })
    },
    triggerBtn: function () {
      if (this.count >= 3) {
        this.count = 0;
      }
      this.count++;

    },
    getSum: function () {
      if (this.count !== 3) {
        return;
      }
      let sum = 0;
      for (let i in this.tableData) {
        sum = + this.tableData[i][1]
      }
      this.showSum = sum.toFixed(2);
    },
    openForm:function(){
      if (this.count !== 3) {
        return;
      }
      this.dialogVisible = true;
    },
    checkDialog: function (status) {
      this.dialogVisible = status
    }


  },
  filters: {
    dataFormat(p) {

      if (!p) {
        return 0
      }
      let price = parseFloat(p)
      if (!isNaN(price)) {
        return price.toFixed(2);
      }

    }
  },
}
</script>



<style>
</style>